import React from 'react'
// ===================================================================== global template
const { $Lazy } 	= window
const Button 		= $Lazy.load(()=>import('@antd/button'))
const Title 		= $Lazy.load(()=>import('#tp/title/title'))
const TitleSmall 	= $Lazy.load(()=>import('#tp/title/title-small'))
const Loading 		= $Lazy.load(()=>import('@antd/loading'))
const Empty 		= $Lazy.load(()=>import('@antd/empty'))
// =====================================================================
const Index = ({ children, className, contentClassName, scrollClassName, empty, full, flex, title, small, controls, first,  style, scroll,titlePrefix, titleSuffix, loading, minHeight = 90 }) => {
	const [ screen, setScreen ] = React.useState(false)
	const [ show, setShow ] = React.useState(true)
	const onFullClick = React.useCallback(()=>{
		setScreen(!screen)
		setShow(false)
		setTimeout(()=>setShow(true))
	},[screen])
	
	const fullStyle = { position:'fixed', left:0, top:0, bottom:0, right:0, zIndex:100, width:'100%'}
	
	return (
		<div className={`bcf linear ${className||''} ${flex?'fv':''} `} style={ screen ? fullStyle : { borderRadius: first ? '0 0 5px 5px' : '5px', ...style}}>
			{
				title && (
					<>
						{
								small ? (
									<TitleSmall
										className		= 'xplr bbor1' 
										title			= {title} 
										controls		= { controls } 
										onDoubleClick	= { full ? onFullClick : null }
										suffix 			= { screen && <Button label='返回' danger ghost className='ml20' onClick={()=>{
											setScreen(false)
											setShow(false)
											setTimeout(()=>setShow(true))
										}}/> }
									/>
								) : (
									<Title
										title			= { title } 
										prefix			= { titlePrefix } 
										controls		= { controls } 
										onDoubleClick	= { full ? onFullClick : null }
										suffix 			= { screen && <Button label='返回' danger ghost className='ml20' onClick={()=>{
											setScreen(false)
											setShow(false)
											setTimeout(()=>setShow(true))
										}}/> }
									>
										{ show && titleSuffix }
									</Title>
								)
						}
					</>
				)
			}
			<div className={`rel ${contentClassName||''} ${flex?'ex':''}`} style={{minHeight}}>
				{
					scroll ? <div className={`abs_full oxys scrollbar ${scrollClassName||''}`}>{children}</div> : children
				}
				<Loading loading={loading} />
				{
					empty && <Empty data={empty} />
				}
			</div>
		</div>
	)
}

export default Index